<template>
  <div class="feeCount">
       <h4>交易列表>服务费统计</h4>
       <div class="container">
           <h4>订单服务费</h4>
           <div>
              <el-date-picker
                  v-model="value1"
                  type="month"
                  value-format="yyyy-MM"
                  placeholder="选择日期"
                  style="margin:20px;" 
                  @change="searchA()">
              </el-date-picker>
              <el-button type="primary"  @click="searchA()">搜索</el-button>
           </div>
           <div class="info">
                <div>订单总数：{{totalOrder}}</div>
                 <div>总斤数：{{ totalCaseNum }}</div>
                 <div>服务费总额：{{totalServiceFee}}</div>
           </div>
           <h4>提现服务费</h4>
           <el-date-picker
                  v-model="value2"
                  type="month"
                  placeholder="选择日期"
                  value-format="yyyy-MM"
                  style="margin:20px;"
                  @change="searchB()">
              </el-date-picker>
              <el-button type="primary" @click="searchB()">搜索</el-button>
            <div class="info">
               <div>提现人数 ：    {{totalAmount}}</div>
                <div>提现总额 ：   {{totalMoney}}</div>
                 <div>提现服务费 ：{{totalWithDrawServiceFee}}</div>
           </div>
       </div>
  </div>
</template>

<script>
import { countOrderService,countWithDrawService } from '@/request/api'
import { fmoney } from '@/assets/js/common'
export default {
  data(){
     return {
        value1:'',
        value2:'',
        totalCaseNum:'', // 箱数
        totalOrder:'',   // 订单总数
        totalServiceFee:'', // 服务费总额
        totalAmount:'', //  提现人数
        totalMoney:'',  //  提现总额
        totalWithDrawServiceFee:''  // 提现服务费
     }
  },
  created(){
        var myDate = new Date();
        var year =   myDate.getFullYear(); //获取完整的年份(4位,1970)
        var month =  myDate.getMonth()+1; //获取当前月份(0-11,0代表1月)
        var str ;
        if( month < 10) {
            var monthStr = '0'+ month;
            str = year + '-' + monthStr;
        }else {
           str = year + '-' + month;
        }
        this.value1 = str;
        this.value2 = str;
        console.log(this.value1);
        console.log(this.value2);
        this.searchA();
        this.searchB();  
  },
  methods:{
       searchA(){
           countOrderService({
             searchDate:this.value1
           }).then(res => {
               console.log(res);  
               this.totalCaseNum = res.data.totalCaseNum;
                this.totalOrder = res.data.totalOrder;
                 this.totalServiceFee = res.data.totalServiceFee;
           })
       },
       searchB(){
          countWithDrawService({
            searchDate:this.value2
          }).then(res => {
              console.log(res);
               this.totalAmount = res.data.totalAmount;
                this.totalMoney = res.data.totalMoney;
                 this.totalWithDrawServiceFee = res.data.totalWithDrawServiceFee;
          })
       }
  }
 }
</script>
<style  scoped>
.feeCount> h4 {
    line-height: 22px;
    border-left: 5px solid rgb(32, 160, 255);
    font-size:16px;
    color: #666;
    padding-left:  10px;
    font-size:18px;
    margin-bottom:20px;
}
.container h4 {
    background-color: #eee;
    line-height: 50px;
    font-weight: 400;
    font-size:16px;
    padding-left:30px;
    color: #999;

}
.container {
    line-height: 40px;
    padding:0;
}

.container .info {
    display: flex;
    padding: 0  50px;
}
.container .info div {
    width: 360px;
    
}
</style>